<template>
    <div class="help-container-page">
        <el-container>
            <div class="header">
                <headers headerShow></headers>
            </div>
            <el-main class="help-container-main">
                <el-breadcrumb class="router flex items-center" separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item class="item" :to="{ path: helpTitle.one.path }">
                        {{ helpTitle.one.title }}
                    </el-breadcrumb-item>
                    <el-breadcrumb-item
                        class="item"
                        :class="{active: !helpTitle.three.title}"
                        :to="{ path: helpTitle.two.path || '/helps' }">
                        {{ helpTitle.two.title }}
                    </el-breadcrumb-item>
                    <el-breadcrumb-item v-if="helpTitle.three.title" class="item active">
                        {{ helpTitle.three.title }}
                    </el-breadcrumb-item>
                </el-breadcrumb>
                <div class="main-content flex flex-col justify-between">
                    <router-view></router-view>
                    <footers></footers>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import {
    Container,
    Main,
    Breadcrumb,
    BreadcrumbItem,
} from 'element-ui';
import Headers from '@/components/layout/Header';
import Footers from '@/components/layout/Footer';

export default {
    components: {
        ElContainer: Container,
        ElMain: Main,
        Headers,
        Footers,
        ElBreadcrumb: Breadcrumb,
        ElBreadcrumbItem: BreadcrumbItem,
    },
    data() {
        return {
            content: '',
            logId: '123',
        };
    },
    computed: {
        helpTitle() {
            return {...this.$store.state.helpTitle};
        },
    },
    methods: {
        onShow(e) {
            e.show = !e.show;
        },
        getDetail() {
            // this.content = e.title;
        },
        toHelp() {
            this.$router.push({name: 'Help'});
        },
    },
};
</script>

<style lang="scss">
.help-container-page {
    $text-color: #2d70ae;

    padding-top: 60px;

    @media (max-width: 960px) {
        padding-top: 44px;
    }

    .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1;
        background-color: #fff;
        box-shadow: 1px 1px 10px 3px rgba($color: #000000, $alpha: .1);
    }

    .help-container-main {
        padding: 0;

        .router {
            max-width: 1024px;
            margin: 27px auto 69px auto;

            @media (max-width: 960px) {
                font-size: 12px;
                margin: 16px 0 24px 20px;

                .item:last-child {
                    max-width: 150px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
            }

            .item .el-breadcrumb__inner {
                color: rgb(180, 180, 180);
                font-weight: bold;

                @media (max-width: 960px) {
                    font-weight: normal;
                }
            }

            .item .el-breadcrumb__inner:hover {
                color: #409eff;
            }

            .item.active .el-breadcrumb__inner {
                color: rgb(37, 37, 37);
            }
        }

        .main-content {
            min-height: calc(100vh - 110px - 60px);

            @media (max-width: 960px) {
                height: initial;
                min-height: calc(100vh - 52px - 44px);
                background-color: white;
            }
        }
    }

    .el-breadcrumb__inner a, .el-breadcrumb__inner.is-link {
        color: rgb(180, 180, 180);
    }

}
</style>
